<template>
  <div class="rollContainer">
    <div class="tableBtnBox">
      <Button icon="md-add" size="default" @click="add">添加展会分类</Button>
    </div>
    <div class="timeTable">
      <div class="table" v-for="(item,index) in list" :key="index">
        <div class="date">
          <Tag type="dot" @on-close="close($event,index)" closable>{{item.name}}</Tag>
          <Button icon="md-add" size="default" type="primary" @click="addNode(index)">添加单位分类</Button>
        </div>

        <Table border ref="selection" :columns="columns" :show-header="false" :data="item.node">
          <template slot-scope="{ row }" slot="units">{{row.units|chekType(row)}}</template>
          <template slot-scope="{ row }" slot="action">
            <span class="tableBtn" @click="show(row,index)">
              <Icon size="18" type="ios-create-outline" />编辑
            </span>
            <span class="tableBtn" @click="remove(row,index)">
              <Icon size="18" type="ios-trash" />删除
            </span>
          </template>
        </Table>
      </div>
    </div>
    <Modal v-model="isAdd" :title="dateTime==''?'添加展会':'编辑展会'" width="700">
      <Form ref="addForm" :model="addForm" :rules="rules" :label-width="140">
        <FormItem label="展会分类名称" prop="name">
          <Input type="text" v-model.trim="addForm.name" placeholder="请输入展会分类名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isAdd=false">取消</Button>
        <Button type="primary" @click="makeSure('addForm')">确定</Button>
      </div>
    </Modal>
    <Modal v-model="isAddNode" title="添加/编辑分类节点" width="700">
      <Form ref="nodeForm" :model="nodeForm" :rules="noderules" :label-width="140">
        <FormItem label="单位分类名称" prop="name">
          <Input type="text" v-model.trim="nodeForm.name" placeholder="请输入单位分类名称"></Input>
        </FormItem>
        <FormItem label="输入单位名称" prop="units">
          <Select
            v-model="nodeForm.units"
            filterable
            multiple
            allow-create
            @on-create="handleCreate2"
          >
            <Option
              v-for="(item,index) in checkList"
              :value="item"
              :key="index"
            >{{ item }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="isAddNode=false">取消</Button>
        <Button type="primary" @click="sure('nodeForm')">确定</Button>
      </div>
    </Modal>
    <div class="btn">
      <Button size="large" type="primary" @click="submit()">提交组织单位</Button>
    </div>
  </div>
</template>

<script>
import { miceInfo, modifyMice } from "../../api/exhibitors";
export default {
  data() {
    const unitCheck = (rule, value, callback) => {
      if (!value) {
        callback("请输入单位名称！");
      } else {
        callback();
      }
    };
    return {
      isAdd: false,
      isAddNode: false,
      addForm: {
        name: ""
      },
      nodeForm: {
        name: "",
        units: []
      },
      dateTime: "",
      node: "",
      index: "",
      list: [],
      checkList: [],
      columns: [
        {
          title: "名称",
          key: "name",
          align: "center",
          minWidth: 100
        },
        {
          title: "单位",
          slot: "units",
          align: "center",
          minWidth: 200
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          minWidth: 200
        }
      ],
      noderules: {
        units: [{ required: true, validator: unitCheck, trigger: "change" }],
        name: [{ required: true, message: "请输入分类名称！", trigger: "blur" }]
      },
      rules: {
        name: [
          { required: true, message: "请输入展会分类名称！", trigger: "blur" }
        ]
      },
      miceId: "",
      miceObj: {
        about: "",
        address: "",
        articleId: "",
        end_time: "",
        image: "",
        miceId: "",
        miceName: "",
        parentId: "",
        schedule: "",
        sort: "",
        start_time: "",
        type: "",
        organize: ""
      }
    };
  },
  filters: {
    chekType(val, row) {
      return val.join("、");
    }
  },
  created() {
    this.miceId = this.$route.query.miceId;
    this.getmiceInfo();
  },
  methods: {
    handleCreate2(val) {
      this.list[this.index].node[this.node - 1].units = {
        value: val,
        label: val
      };
    },
    getmiceInfo() {
      miceInfo({ miceId: this.$route.query.miceId }).then(res => {
        if (res.status) {
          this.miceObj = res.data;
          this.list = JSON.parse(res.data.organize);
          this.list.map(e => {
            e.node.forEach(item => {
              this.checkList=this.checkList.concat(item.units);
            });
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    submit() {
      const { miceName, about, start_time, end_time, schedule } = this.miceObj;
      modifyMice({
        miceName,
        about,
        start_time,
        end_time,
        miceId: this.miceId,
        organize: JSON.stringify(this.list),
        schedule,
        type: 0
      }).then(res => {
        if (res.status) {
          this.getmiceInfo();
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    add() {
      this.addForm = {
        name: ""
      };
      this.isAdd = true;
    },
    addNode(index) {
      this.node = "";
      this.nodeForm = {
        name: "",
        units: ""
      };
      this.index = index;
      this.isAddNode = true;
    },
    //删除节点
    remove(row, index) {
      this.$Modal.confirm({
        title: "警告",
        content: `删除后无法恢复，确定要删除？`,
        onOk: () => {
          this.list[index].node.splice(row._index, 1);
        },
        onCancel: () => {}
      });
    },
    //删除日期
    close(e, index) {
      this.$Modal.confirm({
        title: "警告",
        content: `删除后无法恢复，确定要删除？`,
        onOk: () => {
          this.list.splice(index, 1);
        },
        onCancel: () => {}
      });
    },
    show(row, index) {
      this.index = index;
      this.node = row._index + 1;
      this.nodeForm = {
        name: row.name,
        units: row.units
      };
      console.log(this.nodeForm);
      this.isAddNode = true;
    },
    makeSure(Name) {
      this.$refs[Name].validate(valid => {
        if (valid) {
          this.list.push({
            name: this.addForm.name,
            node: []
          });
          this.isAdd = false;
        }
      });
    },
    sure(Name) {
      this.$refs[Name].validate(valid => {
        if (valid) {
          if (this.node != "") {
            this.$set(this.list[this.index].node, this.node - 1, {
              name: this.nodeForm.name,
              units: this.nodeForm.units
            });
          } else {
            this.list[this.index].node.push({
              name: this.nodeForm.name,
              units: this.nodeForm.units
            });
          }
          this.isAddNode = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.rollContainer {
  padding-bottom: 180px;
}
.btn {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background-color: #fff;
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>